<template>
	<view class="page_view">
		<view class="page_top">
			<image class="page_top_img" src="" mode=""></image>
			<view class="page_top_right">
				<view class="page_top_right_top line-2">
					Fitbit Inspire 2 健康健身追踪器,带免费 1 年高级试用,24/7 心率和长达 10 天电池
				</view>
				<view class="page_top_right_bottom">
					200积分+100元
				</view>
			</view>
		</view>
		<view class="title">
			给商品打个分吧
		</view>
		<view class="xing">
			<u-rate size="22" inactiveColor="#626262"  gutter='2' activeColor="#DD504A" :count="count" v-model="value"></u-rate>
		</view>
		<textarea class="textarea" placeholder="填写您的真实感受，可以帮助其他的小伙伴哦～" v-model="text_value"></textarea>
		<view class="other">
			<view class="other_title">
				其他用户还勾选了以下标签
			</view>
			<view class="other_view">
				<view :class="[item.active?'other_view_item_active':'other_view_item']" v-for="(item,index) in other_list" @click="otherclick(index)">
					质量很好(191)
				</view>
			</view>
		</view>
		<view class="btn" @click="Comment">
			提交
		</view>
	</view>
</template>

<script>
	import { conComment } from '../../api/common.js';
	export default {
		data() {
			return {
				data:{},
				count: 5,
				value: 0,
				text_value:'',
				data:'',
				kc_id:'',
				info:'',
				order_id:'',
				other_list:[
					{
						active:false,
					},
					{
						active:false,
					},{
						active:false,
					},{
						active:false,
					},{
						active:false,
					},{
						active:false,
					}
				]
			}
		},
		onLoad(options) {
			if(options.data){
				this.data = JSON.parse(options.data);
				console.log(this.data,'==data')
			}
		},
		methods: {
			Comment(){
				let params = {
					id: this.data.id,
					star: this.value,
					content: this.text_value
				}
				conComment(params).then(res=>{
					if(res.code == 200001){
						uni.showToast({
							title: '评价成功',
							icon: 'none'
						})
						uni.navigateBack(-1);
					}else{
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			otherclick(index){
				this.$set(this.other_list[index],'active',!this.other_list[index].active)
			},
		}
	}
</script>

<style>
.page_view{
	padding: 0 30rpx;
}
.page_top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20rpx;
	padding-bottom: 24rpx;
	border-bottom: #F4F4F4 solid 2rpx;
}
.page_top_img{
	width:162rpx;
	height: 162rpx;
	border-radius: 16rpx;
	background-color: #333;
}
.page_top_right{
	width: calc(100% - 182rpx);
}
.page_top_right_top{
	color: #333;
	text-overflow: ellipsis;
	whitespace: nowrap;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}
.page_top_right_bottom{
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 30rpx;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin-top: 30rpx;
}
.title{
	color: #161616;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 26rpx;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin-top: 24rpx;
}
.xing{
	margin-top: 20rpx;
}
.textarea::placeholder{
	color: #A0A0A0;
}
.textarea{
	width: 100%;
	padding: 32rpx;
	box-sizing: border-box;
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	background-color:#F7F8FA;
	border-radius: 12rpx;
	margin-top: 30rpx;
}
.btn{
	width: 690rpx;
	height: 96rpx;
	border-radius: 48rpx;
	text-align: center;
	line-height: 96rpx;
	color: #FFF;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 32rpx;
	font-style: normal;
	font-weight: 400;
	background-color: #3570F6;
	position: absolute;
	bottom: 100rpx;
	left: 30rpx;
}
.other_title{
	color: #161616;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 26rpx;
	font-weight: 700;
	margin-top: 32rpx;
	padding-top: 32rpx;
	border-top: 1rpx solid #F4F4F4;;
}
.other_view{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.other_view_item{
	display: inline-block;
	padding: 8rpx 20rpx;
	border-radius: 26rpx;
	background: #F4F4F4;
	margin-right: 24rpx;
	margin-top: 24rpx;
	color: var(--, #626262);
	font-family: Source Han Sans CN;
	font-size: 22rpx;
	font-weight: 400;
}
.other_view_item_active{
	display: inline-block;
	padding: 8rpx 20rpx;
	border-radius: 26rpx;
	background: #0165FB;
	margin-right: 24rpx;
	margin-top: 24rpx;
	color: #FFF;
	font-family: Source Han Sans CN;
	font-size: 22rpx;
	font-weight: 400;
}
</style>
